<template>
	<div class="login_input">
		<div class="title_icon">
			<slot name="icon"></slot>
		</div>
		<div class="input">
	<input  class="input_model" 
		:placeholder="placeholder"
		:type="type"
		:value="modelValue" 
		 @input="$emit('update:modelValue', $event.detail.value )" />
		</div>
		<div class="clear" v-if="modelValue" @click="clear">
			<span class="iconfont">&#xe6b5;</span>
		</div>
	</div>
</template>

<script>
export default {
	 
	props: { 
		placeholder: {
			type: String,
			default:''
		},
		type: {
			type: String,
			default: 'text'
		}
	} ,
	methods:{
		clear() {  
			this.$emit('update:modelValue', '');
		} 
	}
};
</script>

<style scoped lang="less"> 
 
.login_input {
	display: flex;
	align-items: center;
	padding: 22rpx 0;
	 
	font-size: 12px;
	.title_icon {
		margin-right: 12rpx;
		color: var(primaryColor);
	}
	.input {
		flex: 1;
		&_model {
			border: none !important;
			outline: none !important;
		}
	
	}
	.clear {
		opacity: .2;
	}
}
</style>
